<template>
  <div id="app">
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />



    <div class="rettop"></div>

    <van-tabs v-model="activeName" @click="onClick">
      <van-tab
        v-for="item in navData"
        :key="item.id"
        :title="item.name"
        :name="item.id"
      >
        <div class="goodstitle">
          <p>{{ item.name }}</p>
          <p>{{ item.front_desc }}</p>
        </div>

        <div v-if="goodsList.length == 0" class="aaa">数据库暂无数据...</div>
        <div v-else>
          <ul class="goodslist">
            <li v-for="goods in goodsList" :key="goods.id">
              <img :src="goods.list_pic_url" alt="" />
              <p>{{ goods.name }}</p>
              <p>{{ goods.front_desc }}</p>
            </li>

            <div></div>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script type="text/javascript">

import { categoryNav } from "@/api/category/categoryNav/index";
import { goodsList } from "@/api/category/goodsList/index";
export default {
  data() {
    return {
      bol: false,
      navData: [],
      activeName: "",
      goodsList: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/category" });
    },
    async onClick(name) {
      //   console.log(name);
      var result = await goodsList({
        categoryId: name,
      });
      console.log(result);
      this.goodsList = result.data;
    },
  },
  computed: {},
  components: {
  },
  async created() {
    // this.$route 当前路由对象   一般用于获取到当前地址栏所传递的参数
    // this.$router 所有的路由对象   一般用于页面间的跳转
    var res = await categoryNav({
      id: this.$route.params.id,
    });
    this.navData = res.navData;
    this.activeName = res.currentNav.id;
    //   console.log(this.navData);

    var result = await goodsList({
      categoryId: this.$route.params.id,
    });
    // console.log(result);
    this.goodsList = result.data;
    // console.log(this.goodsList);
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
#app {
  background-color: #f4f4f4;
}
.van-nav-bar{
  width: 100%;
  height: 46px;
  position: fixed;
  top: 0;
  left: 0;
}
.rettop {
  height: 46px;
}
.goodstitle {
  border-top: 10px #f4f4f4 solid;
  border-bottom: 3px #f4f4f4 solid;
  background-color: #fff;
  height: 101px;
  & :first-child {
    font-size: 16px;
    color: #333;
    margin: 15px 0;
  }
  & :last-child {
    color: #999;
    margin: 8px 0 8px 0;
  }
}
.aaa {
    height: 100px;
    line-height: 100px;
    background-color: #fff;
  }
.goodslist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 100%;
  //   background-color: #fff;
  li {
    width: 185px;
    height: 240px;
    background-color: #fff;
    margin-bottom: 3px;
  }
  div {
    width: 185px;
    height: 0.1px;
    margin-bottom: 3px;
  }
  img {
    width: 151px;
    height: 151px;
  }
  
}
</style>
